<template>
  <div class="mainBox cf">
       <div  class="title f">
          <now-time></now-time>
          <!-- <span class="f22 fb mt40 ml20"  style="color: #00B2FF;">15:11:30</span>
          <span class="f18 mt40 ml10" style="color: #00B2FF;">2023/07/07  周五 </span> -->
          <span>清能回收系统大数据平台</span>
          <screenfull id="screenfull" class="allbox mt40  ml10" />
       </div>
       <!-- row -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="box1">
             <div class="bt1 f-c">
                <span>数据统计</span>
                <img  src="../../assets/images/tips1.png" alt="">
             </div>
             <!-- f-w-a -->
             <div class="bc1 " style="">
                  <div class="f-f-c-c" style="width: 50%;margin-top: 25px;" v-for="item,ix in data1" :key="ix">
                       <span class="c0 fb ">{{item.val}}</span>
                       <span class="c1 " style="margin-top:8px;" >{{item.txt}}</span>
                  </div>

             </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="box1" style="position: relative;">
          <!-- <img  style="width: 100%;height: 100%;" src="../../assets/images/sbg.png" alt=""> -->
          <g-map :carData="carData" style="margin: 0 auto;"></g-map>

          <div class="car1" >在线：{{carNum.vehicleOn}}辆 </div>
          <!-- <div class="car2">停止在线：1辆 </div> -->
          <div class="car3">离线：{{carNum.vehicleOff}}辆 </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="box1 " style="padding: 16px 40px;">
             <div class="bt1 f-c">
                <span>最新回收品类</span>
                <img  src="../../assets/images/tips1.png" alt="">
             </div>
             <div class="f-s-b p20 c1 bb">
                <span class="f1">时间</span>
                <!-- <span class="f1" style="text-align: center;"> 地点</span> -->
                <span class="f1" style="text-align: center;">类别</span>
                <span class="f1" style="text-align: right;">重量</span>
             </div>
             <div class="scollcss">
                <autoScroll :list="wasteList" :speed="0.5" :waitTime="2000" :singleHeight="100">
                  <div class="f-s-b p20 c1 bb" v-for="it2,ix2 in wasteList" :key="ix2">
                    <span class="f1">{{it2.time}}</span>
                    <!-- <span class="f1" style="text-align: center;">{{it2.address}}</span> -->
                    <span class="f1" style="text-align: center;">{{it2.type}}</span>
                    <span class="f1" style="text-align: right;">{{Number(it2.weight).toFixed(2)}}KG</span>
                </div>
              </autoScroll>
            </div>

        </div>
      </el-col>
    </el-row>
     <!-- row -->
    <!-- ----------------------------------------------------------------------- -->
    <!-- row -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="box1 box2">
             <div class="bt1  f-c">
                <span style="margin-top: -2px;font-size: 16px;">分类回收总量</span>
                <img  src="../../assets/images/tips1.png" alt="">
             </div>
             <div class="chatBox1">
                  <div class="f-f-c-c f1" >
                    <pie-chart-b :pieData="pieDataB" height="360px" />
                  </div>

             </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="box1 box2">
             <div class="bt1  f-c">
                <span style="margin-top: -2px;font-size: 16px;">回收数据统计</span>
                <img  src="../../assets/images/tips1.png" alt="">
             </div>
             <div class="chatBox1">
                  <div class="f-f-c-c f1" >
                    <line-chart :LineData="LineData" />

                  </div>

             </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="box1 box2" style="padding: 16px 40px;">
             <div class="bt1 f-c">
                <span style="margin-top: -2px;font-size: 16px;">最新预约信息</span>
                <img  src="../../assets/images/tips1.png" alt="">
             </div>
             <div class="f-s-b p20 c1 bb">
                <span class="f1">预约地址</span>
                <!-- <span class="f1" style="text-align: center;"> 地点</span> -->
                <span class="f1" style="text-align: center;">预约用户</span>
                <span class="f1" style="text-align: right;">预约时间</span>
             </div>
            <div class="scollcss" style="height: 300px;padding-top: 20px;" >
                <autoScroll :list="settlementOrderList" :speed="0.5" :waitTime="2000" :singleHeight="100">
                    <div v-for="it3,ix3 in settlementOrderList" :key="ix3">
                        <div class="f-s-b pl20 pr20 pt20 pb10" style="color: #82D9FF;">
                          <span style="display: inline-block;width: 30%;">{{it3.address}}</span>
                          <span>{{phoneNumFilter(it3.phone)}}</span>
                          <span>{{it3.time}}</span>
                        </div>
                        <el-progress color="#00FFFF" :stroke-width="8"  :percentage="Number(it3.weight)" :show-text="false"></el-progress>
                  </div>
              </autoScroll>
            </div>

        </div>
      </el-col>
    </el-row>
     <!-- row -->

  </div>
</template>

<script>
// import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
// import RaddarChart from './dashboard/RaddarChart'
// import PieChart from './dashboard/PieChart'
import PieChartB from './dashboard/PieChartB'

// import BarChart from './dashboard/BarChart'
import Screenfull from '@/components/Screenfull'
import NowTime from './time'
import GMap from './MAP'
import autoScroll from './scoll'
import { getLargeScreen } from '@/api/dashboard/dashboard'

export default {
  name: 'Screen',
  components: {
    // PanelGroup,
    LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart,
    PieChartB,
    Screenfull,
    NowTime,
    GMap,
    autoScroll
  },
  data() {
    return {

      data1: [
        { txt: '绿色回收网点', val: '0' },
        { txt: '绿色分拣中心', val: '0' },
        { txt: '回收总量', val: '0' },
        { txt: '碳排放量', val: '0' },
        { txt: '中转场', val: '0' },
        { txt: '回收种类', val: '0' },
        { txt: '回收员数量', val: '0' },
        { txt: '用户数量', val: '0' }
      ],
      // data2: [
      //   { time: '07/08 11:18:30', txt: '智慧小镇站', type: '废纸', val: '4.2kg' },
      //   { time: '07/09 12:38:21', txt: '桂花苑站', type: '纺织物', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '十里春风站', type: '玻璃', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '明珠城站', type: '塑料', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '旺角花园站', type: '家电', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '大柯家湖站', type: '金属', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '科创智慧小镇站', type: '废纸', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '科创智慧小镇站', type: '废纸', val: '4.2kg' },
      //   { time: '07/08 11:18:30', txt: '科创智慧小镇站', type: '废纸', val: '4.2kg' }
      //
      // ],
      carData: [],
      pieData: [],
      pieDataB: [],
      wasteList: [],
      settlementOrderList: [],
      LineData: [],
      carNum: {
        vehicleOff: '',
        vehicleOn: ''
      }
    }
  },
  created() {
    this.getLargeScreen()
  },
  methods: {
    phoneNumFilter(phone) {
      // 1字符串转化成数组
      let str = ''
      const phoneArr = [...phone]
      // 2.将数组中的4-7位变成*
      phoneArr.map((res, index) => {
        if (index > 2 && index < 7) {
          str += '*'
        } else {
          str += res
        }
      })
      return str
    },

    getLargeScreen() {
      getLargeScreen({}).then(response => {
        const res = response.data
        console.log(res)
        this.carNum.vehicleOff = res.vehicleOff
        this.carNum.vehicleOn = res.vehicleOn
        // console.log(res.vehicleOff, 'responseresponseresponse')
        // this.pieData = res.handleTypeList
        this.wasteList = res.wasteList
        this.settlementOrderList = res.settlementOrderList
        this.LineData = res.chartWeekList
        this.pieDataB = res.chartTypeList

        this.carData = res.recoveryVehicleList
        const data1 = res.wasteCount
        // 绿色回收网点0、绿色分拣中心1，回收总量2、碳排放量3、
        // 中转场4，在增加回收种类5、回收员数量6、用户数量7
        this.data1[0].val = data1.greenWeb?data1.greenWeb:0 + '个'
        this.data1[1].val = data1.greenCore?data1.greenCore:0 + '个'
        this.data1[2].val = data1.wasteTotal?data1.wasteTotal:0 + '吨'
        this.data1[3].val = data1.carbonEmissionTotal?data1.carbonEmissionTotal:0 + '吨'
        this.data1[4].val = data1.transferPlant?data1.transferPlant:0 + '个'
        this.data1[5].val = data1.recoveryTypeNum?data1.recoveryTypeNum:0 + '种'
        this.data1[6].val = data1.recoveryPersonNum?data1.recoveryPersonNum:0 + '个'
        this.data1[7].val = data1.userCount?data1.userCount:0 + '个'
      }).finally(() => {
      })
    },
    format(percentage) {
      const tex = this.data1[2].val
      return tex
    },
    format2(percentage) {
      const tex = this.data1[2].val
      return tex
    }
  }

}
</script>
<style scoped lang="scss">
	// 需要关闭 scoped ，如果你是有scoped属性的，需要添加属性穿透 ::v-deep
  ::v-deep  .el-progress-bar__outer {
  background-color:#06228D
  }
  .progress1{
      ::v-deep .el-progress__text{
          color:#0D55EE;
          font-weight: bold;
        }
        ::v-deep .el-progress-circle__track {
          stroke: #06228D;
        }
  }
  .progress2{
        ::v-deep .el-progress__text{
          color:#FFB300;
          font-weight: bold;
        }
        ::v-deep .el-progress-circle__track {
          stroke: #06228D;
        }
  }

 .allbox{
   position: fixed;
   right: 20px;
   top: 5px;
   font-size: 36px;
 }
.bb{
  border-bottom: 1px solid #00B2FF;
}
.c0{
  color: #00FFFF;
}
.c1{
  color:#00B2FF;

}
.c2{
  color:#FFB300;
}
 .mainBox{
  width: 100%;
  min-height: 100vh;
  background: #ccc ;
  background: #02004D ;

 }
 .title{
    height: 82px;
    background-image: url('../../assets/images/screenTop.png');
    background-size: 100% 100%;
    position: relative;
    span{
      position: absolute;
      top: 40px;
      right: 50%;
      transform: translate(50%,-50%);
      font-size: 22px;
      font-weight: bold;
      opacity: 0.8;
    }
 }
 .box1{
    padding: 16px;
    background-image: url('../../assets/images/s1.png');
    background-size: 100% 100%;
    height: 515px;
    .bt1{

      font-size: 20px;
      font-weight: bold;
      color: #00FFFF;
      position: relative;
      span{
        // width: 180px;
        text-align: center;
      }
      img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 180px;
        height: 18px;
      }
    }
    .bc1{
      height: 100%;
      margin: 0 26px;
      // border-bottom: 1px solid #0D56EF;
      padding-bottom: 16px;
      display: flex;
      // flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-around;
    }
    .chatBox1{
      display: flex;
    }
 }
 .box2{
  height: 420px !important;

 }
 .bt2{
    font-size: 16px;
 }
 .car1{
    position: absolute;
    top: 240px;
    left: 30px;
    width: 176px;
    height: 40px;
    background-image: url('../../assets/images/car1.png');
    background-size: 100% 100%;
    color: #00FF5F;
    line-height: 40px;
    padding-left: 45px;
 }
 .car2{
    position: absolute;
    top: 120px;
    left: 30px;
    width: 176px;
    height: 40px;
    background-image: url('../../assets/images/car2.png');
    background-size: 100% 100%;
    color: #00B2FF;
    line-height: 40px;
    padding-left: 45px;
 }
 .car3{
    position: absolute;
    top: 180px;
    left: 30px;
    width: 176px;
    height: 40px;
    background-image: url('../../assets/images/car3.png');
    background-size: 100% 100%;
    color: #FF3B3B;
    line-height: 40px;
    padding-left: 45px;
 }
 .scollcss{
  height: 370px;
  // overflow-y: scroll;

 }
</style>
